<script>
import { getEnv } from "@/utils/settings"
import dateUtils from "@/utils/dateUtils"

export default {
  name: "studyReport",
  computed: {
    dateUtils() {
      return dateUtils
    },
  },
  data() {
    return {
      promise: {
        resolve: null,
      },
      doRightCount: 0,
      doWrongCount: 0,
      totalCount: 0,
      duration: 0,
    }
  },
  methods: {
    open(wordList, duration) {
      return new Promise((resolve, reject) => {
        this.promise.resolve = resolve
        this.totalCount = wordList.length
        for (let wordListElement of wordList) {
          if (wordListElement.userAnswer) {
            this.doRightCount++
          } else {
            this.doWrongCount++
          }
        }
        this.duration = duration / 1000
        this.$refs.popup.open()
      })
    },
  },
}
</script>

<template>
  <uni-popup
    ref="popup"
    type="bottom"
    @change="
      (e) => {
        if (e.show === false) {
          promise.resolve()
        }
      }
    "
  >
    <view class="component">
      <view class="header">当天的单词学习任务已完成</view>
      <view class="content">
        <view class="item">
          <view class="left">
            <text class="label">用时:</text>
            <text class="value">{{ dateUtils.formatTimeChinese(duration) }}</text>
          </view>
          <view class="right">
            <text class="label">总共背了</text>
            <text class="value" style="color: var(--primary-color)">{{ totalCount }}</text>
            <text class="label">个单词</text>
          </view>
        </view>
        <view class="item">
          <view class="left">
            <text class="label">已掌握</text>
            <text class="value" style="color: var(--success-color)">{{ doRightCount }}</text>
            <text class="label">个单词</text>
          </view>
          <view class="right">
            <text class="label">未掌握</text>
            <text class="value" style="color: var(--error-color)">{{ doWrongCount }}</text>
            <text class="label">个单词</text>
          </view>
        </view>
      </view>
      <view
        class="confirm-btn"
        @click="
          () => {
            $refs.popup.close()
          }
        "
        >确定</view
      >
      <view class="tips">注：未掌握的单词已加入错词本</view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.component {
  background: var(--background-color);
  padding: 40rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  > .header {
    text-align: center;
    font-size: 40rpx;
  }
  > .content {
    margin-top: 40rpx;
    > .item {
      &:not(:first-child) {
        margin-top: 30rpx;
      }
      display: flex;
      font-size: 32rpx;
      > .left,
      > .right {
        width: 50%;
        > .value {
          margin: 0 10rpx;
        }
      }
    }
  }
  > .confirm-btn {
    margin-top: 40rpx;
    width: 100%;
    padding: 20rpx 0;
    font-size: 32rpx;
    background: var(--theme-color);
    color: var(--text-color-white);
    text-align: center;
    border-radius: 39rpx;
  }
  > .tips {
    margin-top: 40rpx;
    font-size: 28rpx;
    color: var(--text-color-light);
  }
}
</style>
